<script lang="ts" setup>
withDefaults(
  defineProps<{
    closeOnScroll?: boolean;
    openOnContext?: boolean;
    openOnHover?: boolean;
    persistOnItemClick?: boolean;
    split?: boolean;
  }>(),
  {
    openOnHover: false,
    openOnContext: false,
    closeOnScroll: false,
    persistOnItemClick: false,
    split: false,
  },
);

const emit = defineEmits<{
  toggle: [event: Event];
}>();

const handleToggle = (event: Event) => {
  emit('toggle', event);
};
</script>

<template>
  <fluent-menu
    :open-on-hover="openOnHover"
    :open-on-context="openOnContext"
    :close-on-scroll="closeOnScroll"
    :persist-on-item-click="persistOnItemClick"
    :split="split"
    @toggle="handleToggle"
  >
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="trigger">
      <slot name="trigger"></slot>
    </span>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="primary-action">
      <slot name="primary-action"></slot>
    </span>
    <slot></slot>
  </fluent-menu>
</template>

<style scoped></style>
